In CSS1 there was only a simple way of specifying the font to be used for displaying the text of an element. CSS2 introduces the idea of WebFonts, which allows for
You might be wondering why not simply let the developer specify a font using its name, and then specify the characteristics (weight, size and so on). Unfortunately, there isn't any simple way of specifying fonts by name. More importantly, what happens when the specified font isn't available? The font specification scheme of CSS2 is more flexible, allowing for a much closer match to the desired font even when it isn't available.
There are two aspects to the use of fonts in CSS2. Specification by the developer, and Selection by the browser.
To aid in the browser's selection of a font, CSS2 introduces the @font-face rule, which allows developers to create a font description. The @font-face rule is part of the style sheet, and helps the browser to match a font at its disposal to the one desired by the developer.
An @font-face rule comprises a list of one or more font descriptors. These can specify something as simple as the font name and its url, through to a list of the widths of its glyphs (graphical representation of the characters).
A simple example of an @font-face rule in operation, taken from the CSS2 specification is
<HTML>
<HEAD>
<TITLE>Font test</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print">
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
}
H1 { font-family: "Robson Celtic", serif }
</STYLE>
</HEAD>
<BODY>
<H1> This heading is displayed using Robson Celtic</H1>
</BODY>
</HTML>
Here the browser will use the downloaded font for headings of level 1.
As you might guess from the above, the @font-face rule's syntax is the keyword @font-face, followed by a set of descriptors, all contained within curly braces, and separated by a semi-colon. From the above example
@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt")
}
The font descriptors themselves are very similar to the properties of a normal statement, in fact many of them are almost the same. In essence, a descriptor has a name, followed by a colon, then a comma separated list of values. Let's take a look at a more complicated example, then discuss the different types of descriptor in detail.
@font-face {
font-family: serif;
src: local("Palatino"),
local("Times New Roman"),
local("New York"),
local("Utopia"),
url("http://somewhere/free/font");
font-weight: 100, 200, 300, 400, 500;
font-style: normal;
font-variant: normal;
font-size: all
}
This rule might be used as part of a browser's "default" appearance. It suggests that serif fonts, especially when normally styled, and weighted, and at any font size, should use local fonts called Palatino, Times New Roman, etc., and failing that, download the remote font specified by the url.
Just what names for descriptors can there be? You'll have already noted the familiar font-family, font-weight, font-style, font-size, and font-variant. In fact all of the font properties we've seen can be used to help specify a font using @font-face rules. The slight difference between font descriptors in @font-face rules and font properties in normal statements is that the descriptors can take a list of values, where generally, font properties can't.
In addition, there are a large number of other descriptor names. These are specialized, and require some understanding of underlying typographical concepts. As such, it's a bit beyond this guide's level of competence. I recommend you take a look at the CSS2 specification, which has a good introduction to many of the important ideas, and full coverage of the different types of descriptor.
CSS2 enables the insertion of generated content into a document. This is a powerful site management feature, but not without its complexity. Next we take a look at it.
|
|
|
|